<template>
  <div class="custom-tab-bar">
    <van-tabbar route v-model="active" @change="onChange" @before-change="handleBeforeChange()" placeholder
      safe-area-inset-bottom active-color="#ffffff" inactive-color="#2F85D4">
      <van-tabbar-item v-for="(item, index) in list" :key="index" :to="item.name" replace style="background-color:#05224F"
        :border="false">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.normal" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: 'TabBar',
  setup() {
    const active = ref(0);
    const list = [
      {
        id: 1,
        name: "/index",
        title: "首页",
        active: new URL("@/assets/images/首页-1.png", import.meta.url).href,
        normal: new URL("@/assets/images/首页.png", import.meta.url).href,
      },
      {
        id: 2,
        name: "/BdataPage",
        title: "数据",
        active: new URL("@/assets/images/数据-1.png", import.meta.url).href,
        normal: new URL("@/assets/images/数据.png", import.meta.url).href,
      },
      {
        id: 3,
        name: "/Cworkbench",
        title: "工作台",
        active: new URL("@/assets/images/工作台-1.png", import.meta.url).href,
        normal: new URL("@/assets/images/工作台.png", import.meta.url).href,
      },
      {
        id: 4,
        name: "/Dmy",
        title: "我的",
        active: new URL("@/assets/images/我的-1.png", import.meta.url).href,
        normal: new URL("@/assets/images/我的.png", import.meta.url).href,
      },
    ];

    const onChange = (index) => {
    };
    const handleBeforeChange = (e) => {
      return false;
    };

    return { active, list, onChange, handleBeforeChange };
  },
});
</script>

<style lang="less" scoped>
:deep(.van-tabbar::after) {
  border: none;
}

.van-tabbar {
  border-top: none;
}
</style>
